<template>
	<view>
		<u-navbar
			title="工单详情"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="7" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else>
				<view style="background-color: #fff;">
					<u-cell-group :border="false">
						<u-cell title="任务名称" :value="detail.workCategory_dictText"></u-cell>
						<u-cell title="任务类型" :value="detail.workOrder_dictText"></u-cell>
						<u-cell title="巡检位置" :border="false" ></u-cell>
					</u-cell-group>
				</view>
				<view class="plan-detail">
					<view class="plan-detail-status">
						<view :style="{backgroundColor: appColor + 'B3'}" class="plan-detail-status-color"></view>
						<text class="plan-detail-status-text">未巡检</text>
					</view>
					<view class="plan-detail-status">
						<view :style="{backgroundColor: appColor}" class="plan-detail-status-color"></view>
						<text class="plan-detail-status-text">已巡检</text>
					</view>
				</view>
				<view class="plan-detail-m">
					<view :style="{backgroundColor: item.status === '0' ? appColor + 'B3' : appColor}" class="plan-detail-m-item" @click="toDetail(item)" v-for="item in list" :key="item.id">
						<text>{{item.dormitoryId_dictText}}</text>
						<text style="position: absolute;right: 16rpx;top: 16rpx;font-size: 24rpx;line-height: 24rpx;">{{item.status_dictText}}</text>
					</view>
				</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {listAdoptWorkTaskDetailByMainId} from '@/api/me.js';
	export default {
		data() {
			return {
				loading: true,
				list: [],
				id: -1
			}
		},
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			},
			imgHeight() {
				return this.scrollHeight - 44 - 132 + 'px';
			}
		},
		onLoad({id}) {
			this.id = id;
		},
		onShow() {
			this.loading = true;
			setTimeout(() => {
				listAdoptWorkTaskDetailByMainId({taskId: this.id, pageNo: 1, pageSize: 100}).then(res => {
					this.list = res.result.records;
				}).finally(() => {
					this.loading = false
				})
			}, 500)
		},
		methods: {
			// 详情
			toDetail({id, status, dormitoryId_dictText}) {
				if(status === '0') {
					this.$cuNavigateTo(`/pages/me/planReport?id=${id}&name=${dormitoryId_dictText}`);
				} else {
					this.$cuNavigateTo('/pages/me/planReportDetail?id=' + id);
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.plan-detail {
		display: flex;
		align-items: center;
		padding: 32rpx;
		padding-top: 0;
		background-color: #fff;
		.plan-detail-status {
			display: flex;
			align-items: center;
			margin-right: 32rpx;
			.plan-detail-status-color {
				width: 32rpx;
				height: 32rpx;
				border-radius: 8rpx;
			}
			.plan-detail-status-text {
				color: #000;
				font-size: 28rpx;
				padding-left: 8rpx;
			}
		}
	}
	.plan-detail-m {
		padding: 32rpx;
		padding-top: 0;
		background-color: #fff;
		&:after{
		    content:'';
			/* 伪元素添加的标签是行内, 要求块 */
			display:block;
			clear:both;
			/* 补充代码：在网页中看不到伪元素 *//* 为了兼容性 */
			height:0;
			visibility:hidden;
		}
		.plan-detail-m-item {
			width: 32%;
			height: 200rpx;
			margin-right: 2%;
			margin-bottom: 12rpx;
			float: left;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			position: relative;
			&:nth-child(3n+3) {
				margin-right: 0;
			}
		}
	}
</style>